<template>
  <div>
    <div class="video_wrap">
      <!-- 学习页面的视频 -->
      <video class="video_info" controls :src="'http://localhost:3000/'+$store.state.nowVideo">

      </video>
      <van-icon class="arleft" @click="leftClick" name="arrow-left"></van-icon>
    </div>
    
    <van-tabs v-model="activeKIndex">
        <van-tab title="章节">
          <h1 class="cname"> {{Cname}}</h1>
          <!-- 目录组件 -->
          <dir-com :CDlist="CDlist" :CDid="c_id"></dir-com>
        </van-tab>
        <van-tab title="评价">
          <evaluate-com :pjList="pjList" :CDid="CDid"></evaluate-com>
        </van-tab>
        <van-tab title="问答">
          
        </van-tab>
        <van-tab title="笔记">内容 4</van-tab>
      </van-tabs>

  </div>
</template>
<script>
import dirCom from '../CourseBuy/dir.vue'
import evaluateCom from '../CourseBuy/evaluate.vue'
import {getCourseDir,loginCourseInfo} from '../../api/course'
export default {
  data(){
    return{
      activeKIndex:0,
      c_id:"",//课程的_id
      CDid:"",//课程ID
      Cname:"",//课程名称
      CDlist:[],
      pjList:[]
    }
  },
  created(){
      this.$store.commit("cleartotalvideo");
      this.c_id=this.$route.query.c_id;
      this.CDid=this.$route.query.CDid; //课程ID
      this.Cname=this.$route.query.Cname;
      
  },
  beforeMount(){
    this.getDirList();
    this.getCourse();
  },
  components:{dirCom,evaluateCom},
  methods:{
    leftClick(){
      this.$router.go(-1)
    },
    // 获取课程信息 和评价信息
    async getCourse(){
      var res=await loginCourseInfo(this.CDid);
      this.pjList=res.data.evaluate.list;
    },
    // 获取目录列表接口
    async getDirList(){
      var res=await getCourseDir(this.CDid,this.c_id)
      this.CDlist=res.data.list;
    }
  },
}
</script>
<style lang="less">
  .video_info{
    width: 100%;
    height: 300px;
  }
  .video_wrap{
    position: relative;
    .arleft{
      position: absolute;
      top:10px;
      left: 10px;
      font-size: 25px;
      color: white;
    }
  }
.cname{
  line-height: 50px;
  padding-left: 30px;
  box-sizing: border-box;
  background: white;
  margin-top: 10px;
}
</style>